<!DOCTYPE html>
<html lang="en">
<head>
  <title>Gallery - Gallery Page | Tut-Tutoring</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
   <link rel="stylesheet" href="css/colorbox.css" />
  <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
  <script type="text/javascript" src="js/cufon-yui.js"></script>
  <script type="text/javascript" src="js/Humanst521_BT_400.font.js"></script>
  <script type="text/javascript" src="js/Humanst521_Lt_BT_400.font.js"></script>
  <script type="text/javascript" src="js/cufon-replace.js"></script>
	<script type="text/javascript" src="js/roundabout.js"></script>
  <script type="text/javascript" src="js/roundabout_shapes.js"></script>
  <script type="text/javascript" src="js/gallery_init.js"></script>
    <script type="text/javascript" src="js/jquery.colorbox.js"></script>
	
  
  <script>
			$(document).ready(function(){
				
				$(".inline").colorbox({inline:true, width:"50%"});
				$(".callbacks").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});
				
				//Example of preserving a JavaScript event for inline calls.
				$("#click").click(function(){ 
					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
					return false;
				});
			});
		</script>
  <!--[if lt IE 7]>
  	<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="all">
  <![endif]-->
  <!--[if lt IE 9]>
  	<script type="text/javascript" src="js/html5.js"></script>
    <script type="text/javascript" src="js/IE9.js"></script>
  <![endif]-->

<body>
  <!-- header -->
  <header>
    <div class="container">
    	<h1><a href="index.html">Tut-Tutoring</a></h1>
      <nav>
        <ul>
        	<li><a href="index.html">Home</a></li>
            <li><a href="lesson.html">Lesson</a></li>
          <li><a href="gallery.html">Gallery</a></li>
		  <li><a <a class='inline' href="#inline_content">Edit Details</a></li>
          <li><a href="index.html" class="current">Logout</a></li>
          
        </ul>
      </nav>
    </div>
	</header>
  <!-- #gallery -->
  <section id="gallery">
  	<div class="container">
    	
  	</div>
  </section>
  <!-- /#gallery -->
  <div class="main-box">
    <div class="container">
      <div class="inside">
        <div class="wrapper">
        	<!-- aside -->
          <aside>
            <h2>Song <span>Details</span></h2>
            <!-- .contacts -->
            <ul class="contacts">
            	<li><strong>Title:</strong>song name</li>
              <li><strong>Uploader:</strong>username</li>
              <li><strong>Date</strong>upload date</li>
            </ul>
            <!-- /.contacts -->
            <h3>Details:</h3>
            Uploaders comments will go here
          </aside>
          <!-- content -->
          <section id="content">
            <article>
            	<h2>Leave a  <span>Comment</span></h2>
              <form id="contacts-form" action="" method="post">
                <fieldset>
                  <div class="field">
                    <label>Your Name:</label>
                    <input type="text" value=""/>
                  </div>
                  
                    <div class="field">
                    <label>Your Message:</label>
                    <textarea></textarea>
                  </div>
                  <div><a href="#" onclick="document.getElementById('contacts-form').submit()">Send Your Message!</a></div>
                </fieldset>
              </form>
            </article> 
          </section>
        </div>
      </div>
    </div>
  </div>
  <!-- This contains the hidden content for inline calls -->
			<div style='display:none'>
				<div class="img_modal" id='inline_content' style='padding:10px;' >
					<h2>Login</h2>	
					
					<ul>					
						<li><input  style ="padding-bottom:5px" value="" id="user_login" name="user[login]" placeholder="username"
													size="30" type="text" required></li>
						<li><input value="" id="user_login" name="user[login]" placeholder="password"
													size="30" type="text" required></li>                                  
						<li class="button">
									<input type="hidden" name="option" value="login" />
									<input class="button_save" name="commit" value="Sign In" type="submit">
								     
					</li>
                       </ul>      
                                 
							
			</div>
		</div>
  <!-- footer -->
  <footer>
    <div class="container">
    	<div class="wrapper">
        <div class="fleft">Copyright - Tut-Tutoring</div>
        <div class="fright"></div>
      </div>
    </div>
  </footer>
  <script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
